<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<link rel="stylesheet"  href="styles/pizza-style/yui-reset.css" />
<link rel="stylesheet" href="styles/pizza-style/style.css">
<!--[if IE]> <link rel="stylesheet" type="text/css" href="css/style-ie.css"> <![endif]--> 
<link rel="stylesheet"  href="styles/pizza-style/category-bgs.css">
<link rel="stylesheet" href="styles/pizza-style/impromptu.css">
<link rel="stylesheet"  href="styles/pizza-style/tooltip.css">
<link rel="stylesheet"  href="styles/pizza-style/tabs.css">   
<link rel="stylesheet"  href="styles/pizza-style/menu-modal.css">
<link rel="stylesheet"  href="styles/pizza-style/fancybox.css">
<link rel="stylesheet"  href="styles/pizza-style/tango/skin.css" >

<c:url var="calculatePriceURL" value="/calculatePizzaPrice.action" />
<c:url var="addAnotherPizza" value="/addAnotherPizza.action" />

<script src="js/common/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/common/submitform.js" type="text/javascript"></script>
<script type="text/javascript">
function calculateRates() {  
	  // get the form values  
	  var serveId = $('input:radio[name=serveId]:checked').val();
	  var pizzaId = '<c:out value="${pizza.pizzaId}"></c:out>';
	  var quantity = $("#quantity :selected").val();
	  var toppings = gettoppings();
	  $.ajax({  
	    type: "POST",  
	    url: "${calculatePriceURL}",  
	    data: "serveId=" + serveId + "&pizzaId=" + pizzaId+ "&quantity=" + quantity + "&toppings=" + toppings,
	    dataType:"json",  
	    success: function(response){  
	      // we have the response  
	      $('#product-price').html(response);
	     }  
	  	
	  });  
	}
function addAnotherPizza(addsides) {  
	  // get the form values  
	  var serveId = $('input:radio[name=serveId]:checked').val();
	  var pizzaId = '<c:out value="${pizza.pizzaId}"></c:out>';
	  var quantity = $("#quantity :selected").val();
	  var toppings = gettoppings();
	  var netPrice = '<c:out value="${pizza.netPrice}"></c:out>';
	  var fromSides;
	  if(addsides == 'fromsides')
	  {
		  fromSides = true;
	  }
	  else
	  {
		  fromSides = false;
	  }
	  $.ajax({  
	    type: "POST",  
	    url: "${addAnotherPizza}",  
	    data: "serveId=" + serveId + "&pizzaId=" + pizzaId+ "&quantity=" + quantity + "&toppings=" + toppings + "&netPrice=" + netPrice,  
	    success: function(response){  
	    	setTimeout(loadinparent('/pizza/selectpizza.action?fromSides='+fromSides, true),3000);
	     }  
	    
	  });  

	  setTimeout(loadinparent('/pizza/selectpizza.action?fromSides='+fromSides, true),3000);
	}
function gettoppings()
{
	var topps = [];
	$(".toppings-check:checked").each(function() {
		topps.push(this.value);
	});
	return topps;
}

function loadinparent(url, closeSelf){ 
	self.opener.location = url;
	if(closeSelf) self.close();
	
}
$(".toppings-check").bind("change",calculateRates());

function refreshParent() 
{
    window.opener.location.reload(true);
}

</script>
</head>
<body onunload="refreshParent();">
	<form:form  method="post" commandName="pizza" id="pizzaConfigForm">
	<div style="width:665px;height:700px;overflow: hidden;position:relative;">
		<div id="dialog">
			<h4 style="padding:0 10px 0 0; font-weight:bold; width:auto; float:left;"> 
				<c:out value="${pizza.pizzaName}"></c:out>
			</h4>
		</div>
		<p class="pizza-description">${pizza.description}</p>
		<div style="clear:left;" class="modal-side-image">
			<img width="203" height="500" border="0" alt="Delicious" src="images/pizzaimages/configPizza.jpg">
     	</div>
     	<div class="size-crust" style="">
     		<img width="219" height="31" border="0" alt="Choose size and crust" style="margin-bottom: 3px;" src="images/pizzaimages/choose_size_and_crust.png">
     		<div id="list1b" style="float:left; margin-top: 5px;" class="select-crust selected ui-accordion">
     			<div class="crust-size-select">
     				<h4 id="crust-type-1">Select Size
     						<p>
     							<input type="radio" name="serveId" value="2" class="size-selector" checked="checked" onchange="calculateRates();">Medium (serves 2)
     						</p>
     						<p>
     							<input type="radio" name="serveId" value="3" class="size-selector" onchange="calculateRates();">Large (serves 4)
     						</p>
     						<p>
     							<input type="radio" name="serveId" value="1" class="size-selector" onchange="calculateRates();">Regular (serves 1)
     						</p>
     				</h4>
     			</div>
     		</div>
     	</div>
     	<div class="modal-toppings" style="visibility: visible;">
			<img width="169" height="31" border="0" alt="Extra Toppings" src="images/pizzaimages/extra-toppings.png"> 
			<div class="clr"></div>
			<div id="list1a" style="float:left;" class="select-toppings ui-accordion selected">
				<a id="veg-topping-link" class="selected" style="margin-top: 0px;"><span>Veg Toppings</span></a>
				<div style="display: block;">
					<table border="0" id="veg-topping-select">
						<tbody>
							<c:forEach items="${vegTopps}" var="topping" varStatus="status">
							<tr>
								<td class="topping-name <c:choose><c:when test="${status.count % 2 == 0}">even-row</c:when><c:otherwise>odd-row</c:otherwise></c:choose>">${topping.name}</td>
								<td class="topping-check <c:choose><c:when test="${status.count % 2 == 0}">even-row</c:when><c:otherwise>odd-row</c:otherwise></c:choose>">
									<form:checkbox cssClass="toppings-check" path="toppings" value="${topping.id}" label="${topping.name}" onchange="calculateRates();"/> 
								</td>
							</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
				<a id="nonveg-topping-link" class="selected"><span>Non Veg Toppings</span></a>
				<div style="display: block;">
					<table border="0" id="nonveg-topping-select">
						<tbody>
							<c:forEach items="${nonVegTopps}" var="topping" varStatus="status">
							<tr>
								<td class="topping-name <c:choose><c:when test="${status.count % 2 == 0}">even-row</c:when><c:otherwise>odd-row</c:otherwise></c:choose>">${topping.name}</td>
								<td class="topping-check <c:choose><c:when test="${status.count % 2 == 0}">even-row</c:when><c:otherwise>odd-row</c:otherwise></c:choose>">
									<form:checkbox cssClass="toppings-check" path="toppings" value="${topping.id}" label="${topping.name}" onchange="calculateRates();"/> 
								</td>
							</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		
		<div class="order-total">
         <table width="375px" border="0" style="vertical-align:middle">
            <tbody>
            	<tr valign="middle">
                	<td style="padding-left:20px; width:90px;font-size: 16px; font-weight: bold;color: #555555;">Quantity</td>
                	<td style="vertical-align:top">   
                   	  <span class="spinner">
                    	<form:select path="quantity" items="${quantities}" onchange="calculateRates();" id="quantity"></form:select>
                     </span>
                   </td>
                	<td style="width:60px;font-size: 16px; font-weight: bold;color: #555555;">Price</td>
                	<td style="font-size: 16px; font-weight: bold; color: #CD0029;">
                	<input type="hidden" id="hidden-unit-price" value="365">
                		<span>Rs. </span>
                		<input type="hidden" id="netPrice" value="" />
						<span id="product-price"> <c:out value="${pizza.netPrice}"></c:out> </span>
                	</td>
               </tr>
        	</tbody>
        </table>
		<p style="margin-top: 25px;">
			<button style="border: medium none; background: none repeat scroll 0% 0% transparent; padding: 0px; cursor: pointer; width: 165px; height: 33px; display: inline;" id="add-another-pizza" onclick="addAnotherPizza();">
			<img border="0" alt="Add another Pizza" src="images/pizzaimages/add_another_pizza.png">
			</button> 
            <button style="border: medium none; background: none repeat scroll 0% 0% transparent; margin-left: 25px; cursor: pointer; padding: 0px; width: 165px; height: 33px; display: inline;" id="proceed-to-sides" onclick="addAnotherPizza('fromsides');">
            <img border="0" alt="Add another Pizza" src="images/pizzaimages/proceed_to_sides.png">
            </button> 
		</p>
	  </div>
	
	</div>
</form:form>
</body>
</html>